<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>

  <title>Vite App</title>
</head>

<body>
 	<div id="app" class="demo"></div>

<script>
	const app = Vue.createApp({
		data() {
			return { count: 4 ,number : '1'}
		},
		methods:{
			incred(){
				this.count++
			},
			contact(){
				this.number += this.number
			}
			
		}
	})
	const vm = app.mount('#app')
	document.write("1<br>1<br>------")
	document.write(vm.$data.count)
	document.write("<br>")
	document.write("vm.count:",vm.count)
	vm.$data.count = 5
	document.write("<br>")
	document.write("vm.$data.count:",vm.$data.count)
	document.write("<br>")
	vm.count = 6
	document.write("<br>")
	document.write("vm.$data.count:",vm.$data.count)
	
	vm.incred()
	document.write("<br>")
	document.write("vm.$data.count:",vm.$data.count)
	document.write("<br>")
	document.write("vm.$data.number:",vm.$data.number)
	vm.contact()
	vm.contact()
	document.write("<br>")
	document.write("vm.$data.number:",vm.$data.number)
	
	
  </script>
</body>

</html>
